<template>
  <view class="box">
    <view
      class="tou top fixed"
      :style="'padding-top:' + statusBarHeight1 + 'px'"
    >
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      中介
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text style="position: absolute; left: 50%; transform: translateX(-50%)"
        >中介</text
      >
      <!-- #endif -->
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
      />
    </view>
    <view
      class="tou top"
      :style="'padding-top:' + statusBarHeight1 + 'px'"
    ></view>
    <view class="bannerBox" :class="scrollTop > 50 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="10000"
          duration="500"
        >
          <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            @click="bannerD(item.id)"
          >
            <image :src="imgUrl + item.image" mode="aspectFill" />
            <view class="byTitle"
              ><span>{{ item.title }}</span></view
            >
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view>
      <view
        class="tower-swiper"
        @touchmove="TowerMove"
        @touchstart="TowerStart"
        @touchend="TowerEnd"
      >
        <view
          class="tower-item"
          :class="item.zIndex == 1 ? 'none' : ''"
          v-for="(item, index) in swiperList"
          :key="index"
          :style="[{ '--index': item.zIndex, '--left': item.mLeft }]"
          :data-direction="direction"
          @click="bannerD(item.id)"
          @touchstart="touchstart"
        >
          <view class="swiper-item">
            <image :src="imgUrl + item.image" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <!-- <scroll-view
        :style="'height:calc( 100vh - ' + statusBarHeight + 'px )'"
        scroll-y
        @scrolltolower="down"
        refresher-background="#f5f5f5"
      >
         
      </scroll-view>-->
      <view
        class="li"
        v-for="(item, index) in Recommend"
        :key="index"
        @click="details(item.id)"
      >
        <image mode="aspectFit" :src="imgUrl + item.image" />
        <view class="li_1">
          <view class="tit">{{ item.shopName }}</view>
          <view class="jiedao">地址：{{ item.otherAddress }}</view>
          <view class="shijian">
            <span
              style="
                margin-right: 24rpx;
                color: red;
                font-size: 36rpx;
                font-weight: 600;
              "
              >{{ item.houseNum || 0 }}套</span
            >
            <span>在售/在租</span>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image
          src="https://pic.bangbangtongcheng.com/static/none.png"
          mode="widthFix"
        />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus"
        >没有更多了</view
      >
    </view>
    <view v-if="scrollTop > 50" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view class="zbc" v-if="zbc">
      <view class="tan">
        <view class="text">商家已将您标记为离职，是否同意？</view>
        <view class="xiao">稍后</view>
        <view class="tong">同意</view>
        <view class="guan" @click="guan">×</view>
      </view>
    </view>
    <uniBall></uniBall>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
    <!-- <uni-popup ref="bindLocationTip" mode="center">
      <view class="binds_frame_bindLocationTip">
        <view class="binds_frame_t"></view>
        <view class="binds_frame_c">您已关闭位置权限<br />或获取位置信息失败</view>
        <view class="binds_frame_b">
          <view class="cancel" @click="$refs.bindLocationTip.close()">取消</view>
          <view class="determine" @click="toLocationSetting()">确定</view>
        </view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script>
import permision from "@/js_sdk/wa-permission/permission.js";
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = 96;
//  #endif
import Tabbar from "@/components/tabbar.vue";
export default {
  data() {
    return {
      statusBarHeight,
      zbc: false,
      swiperList: [],
      bannerList: [],
      direction: "",
      imgUrl: this.$imgSrc,
      scrollTop: "0",
      pageSize: 10,
      pageNo: 1,
      trigger: false,
      downStatus: true,
      upStatus: true,
      Recommend: [],
      latitude: "",
      longitude: "",
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  onPageScroll: function (Object) {
    console.log(Object.scrollTop); //实时获取到滚动的值
    this.scrollTop = Object.scrollTop;
  },
  onReachBottom() {
    this.down();
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onLoad() {
    this.getBanner();
    this.getBanner1();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
    this.getLocation();
  },
  onShow() {},
  methods: {
    down() {
      if (this.downStatus) {
        this.pageNo++;
        console.log(2222);
        this.getRecommend();
      }
    },
    async getLocation() {
      this.getLocation1();
    },
    toLocationSetting() {
      if (plus.os.name === "iOS") {
        plus.runtime.openURL("app-settings://");
      } else {
        var Intent = plus.android.importClass("android.content.Intent");
        var Settings = plus.android.importClass("android.provider.Settings");
        var Uri = plus.android.importClass("android.net.Uri");
        var mainActivity = plus.android.runtimeMainActivity();
        var intent = new Intent();
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
        var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
        intent.setData(uri);
        mainActivity.startActivity(intent);
      }
    },
    getLocation1() {
      let _this = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      uni.getLocation({
        type: "gcj02",
        highAccuracyExpireTime: "3000",
        success(res) {
          // console.log(res);
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;
          // _this.openMap();
          _this.getRecommend();
          uni.setStorageSync("locationState", 1);
        },
        fail(res) {
          console.log(res, "经纬度没有授权");
          uni.setStorageSync("locationState", 0);
          if (uni.getStorageSync("locationState") == 0) {
            uni.showModal({
              title: "提示",
              content: "您已关闭位置权限或获取位置信息失败",
              success: function (res) {
                if (res.confirm) {
                  // plus.runtime.openURL("app-settings:");
                  if (plus.os.name === "iOS") {
                    plus.runtime.openURL("app-settings://");
                  } else {
                    var Intent = plus.android.importClass(
                      "android.content.Intent"
                    );
                    var Settings = plus.android.importClass(
                      "android.provider.Settings"
                    );
                    var Uri = plus.android.importClass("android.net.Uri");
                    var mainActivity = plus.android.runtimeMainActivity();
                    var intent = new Intent();
                    intent.setAction(
                      Settings.ACTION_APPLICATION_DETAILS_SETTINGS
                    );
                    var uri = Uri.fromParts(
                      "package",
                      mainActivity.getPackageName(),
                      null
                    );
                    intent.setData(uri);
                    mainActivity.startActivity(intent);
                  }
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              },
            });
            return false;
          }
        },
      });
    },
    bannerD(id) {
      uni.navigateTo({
        url: "/pages/index/bannerDetails?id=" + id,
      });
    },
    totop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    touchstart() {
      console.log("开始了");
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    getRecommend() {
      this.upStatus = false;
      this.$myRequest
        .get("/mob/user/getShopInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          longitude: this.longitude,
          latitude: this.latitude,
          status: "1",
          shopType: "1",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.page.count == this.Recommend.length) {
            this.downStatus = false;
            return;
          }
          this.upStatus = true;
          this.trigger = false;
          var str;
          res.page.list.forEach((el) => {
            if (el.image) {
              el.image = el.image.split("|")[0];
            }
            // shopAddress: "山东省青岛市平度市新城家园A区同和路2-11号向阳居房产"
            // 去掉开头的山东省青岛市,如果是的话去掉
            str = el.shopAddress.match(/山东省青岛市(\S*)/);
            if (str) el.otherAddress = str[1];
            else el.otherAddress = el.shopAddress;

            // console.log(str)
          });
          this.Recommend = this.Recommend.concat(res.page.list);
          uni.stopPullDownRefresh();
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
        });
    },
    getBanner() {
      this.$myRequest
        .get("/mob/home/getBanner", {
          type: "9",
        })
        .then((res) => {
          this.bannerList = res.list;
        });
    },
    getBanner1() {
      var that = this;
      this.$myRequest
        .get("/mob/home/getBanner", {
          type: "7",
        })
        .then((res) => {
          this.swiperList = res.list;
          this.TowerSwiper("swiperList");
        });
      setInterval(function () {
        // console.log(1314);
        that.direction = "left";
        that.TowerEnd();
      }, 5000);
    },
    guan() {
      this.zbc = false;
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    sousuo() {
      uni.navigateTo({
        url: "/pages_search/search?searchlogType=3",
      });
      // uni.navigateTo({
      //   url: "/pages/housing/search"
      // });
    },
    details(id) {
      uni.navigateTo({
        url: "/pages_intermediary/shopDetails?id=" + id,
      });
    },
    // towerSwiper
    // 初始化towerSwiper
    TowerSwiper(name) {
      let list = this[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex =
          parseInt(list.length / 2) +
          1 -
          Math.abs(i - parseInt(list.length / 2));
        list[i].mLeft = i - parseInt(list.length / 2);
      }
      this.swiperList = list;
    },
    // towerSwiper触摸开始
    TowerStart(e) {
      this.towerStart = e.touches[0].pageX;
    },
    // towerSwiper计算方向
    TowerMove(e) {
      this.direction =
        e.touches[0].pageX - this.towerStart > 0 ? "right" : "left";
    },

    // towerSwiper计算滚动
    TowerEnd(e) {
      let direction = this.direction;
      let list = this.swiperList;
      if (direction == "right") {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.swiperList.length; i++) {
          this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
          this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
        }
        this.swiperList[list.length - 1].mLeft = mLeft;
        this.swiperList[list.length - 1].zIndex = zIndex;
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = this.swiperList.length - 1; i > 0; i--) {
          this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
          this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
        }
        this.swiperList[0].mLeft = mLeft;
        this.swiperList[0].zIndex = zIndex;
      }
      this.direction = "";
      this.swiperList = this.swiperList;
    },
  },
};
</script>

<style lang="less" scoped>
.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;

  .tan {
    position: absolute;
    width: 600rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    top: 34%;
    left: 75rpx;

    .text {
      width: 100%;
      text-align: center;
      margin-top: 80rpx;
      font-size: 34rpx;
    }

    .xiao {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      border-radius: 37rpx;
      left: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #64b6a8;
    }

    .tong {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 37rpx;
      right: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
    }

    .guan {
      position: absolute;
      width: 58rpx;
      height: 58rpx;
      border: 4rpx solid #ffffff;
      border-radius: 50%;
      left: 50%;
      transform: translateX(-50%);
      bottom: -100rpx;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      font-size: 54rpx;
    }
  }
}

.box {
  width: 100%;
  // padding-bottom: 40rpx;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;

  /* #endif */
  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }

  .image2 {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    /* #endif */
    // #ifdef APP
    // top: 50%;
    // #endif
    bottom: 16rpx !important;
    right: 30rpx;
    z-index: 999999999;
  }
}

.bannerBox {
  width: 100%;
  height: 400rpx;
  background: #64b6a8;
  padding-top: 28rpx;
  margin-top: -4rpx;

  .banner {
    margin-left: 30rpx;
    width: 690rpx;
    height: 346rpx;
    overflow: hidden;
    border-radius: 24rpx;
    .byTitle {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1);

      span {
        width: 650rpx;
        padding: 0 20rpx;
        position: absolute;
        bottom: 46rpx;
        font-size: 34rpx;
        font-weight: 500;
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.image2 {
  position: absolute;
  width: 56rpx;
  height: 56rpx;
  // top: 28rpx;
  bottom: 16rpx;
  right: 30rpx;
  z-index: 999999999;
  /* #ifdef MP-WEIXIN */
  // top: 140rpx;
  /* #endif */
}

.cu-item text {
  font-size: 28rpx;
  color: #333333;
}

.list {
  padding-top: 32rpx;
  margin-left: 30rpx;
  width: 720rpx;

  .tit {
    color: #333333;
    font-size: 36rpx;
    margin-bottom: 24rpx;
  }

  .li {
    width: 96%;
    padding-bottom: 18rpx;

    image {
      width: 300rpx;
      height: 200rpx;
      object-fit: cover;
    }

    .li_1 {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-left: 24rpx;

      .tit {
        width: 366rpx;
        font-size: 34rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; //想要的行数
        -webkit-box-orient: vertical;
      }

      .jiedao {
        width: 366rpx;
        height: 68rpx;
        line-height: 34rpx;
        font-size: 24rpx;
        margin-bottom: 14rpx;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
      }

      .shijian {
        bottom: 4rpx;
        font-size: 26rpx;
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}

.hui {
  position: fixed;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  right: 30rpx;
  bottom: 154rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 24rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.Ptop {
  /* #ifdef H5 || APP-PULS */
  // padding-top: 104rpx;
  margin-top: 98rpx;
  /* #endif */

  /* #ifdef MP  */
  // margin-top: 188rpx;
  /* #endif */
}

.fixed {
  // display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}

.tower-swiper {
  height: 300rpx;
  transform: scale(1);
}

.tower-swiper .tower-item {
  transform: scale(calc(0.6 + var(--index) / 10));
  margin-left: calc(var(--left) * 110upx - 135upx);
  z-index: var(--index);
  width: 360rpx;
  height: 260rpx;
  left: 44%;
  box-shadow: 0px 13px 12px rgba(0, 0, 0, 0.2);
}

.tower-swiper .tower-item.none {
  opacity: 1;
}
</style>
